<template>
    <div class="container">
        <h3>投入品管理</h3>
        <h3 v-show="$store.state.zangw == '1'">གཏོང་དངོས་དོ་དམ་</h3>
        <el-row style="margin-top:20px;">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="handleSearch"
                        style="background-color: #1BC46D;color: #fff;">搜索</el-button>
                </el-input>
            </el-col>
            <!-- <el-button
                type="primary"
                v-if="!added"
                @click="addlaow"
                style="float:right; margin-right: 10px"
            >新增劳务་</el-button> -->

            <el-button type="warning" plain v-if="!added" @click="add" style="float:right; margin-right: 10px"
                v-show="$store.state.zangw == '1'">新增投入品གསར་དུ་བཏང་བའི་གཏོང་རྫས་</el-button>
            <el-button  plain v-if="!added" @click="add" style="float:right;background: rgba(2,179,134,0.06);color: #02B386;border: 1px solid #02B386"
                v-show="$store.state.zangw == '2'">新增投入品</el-button>
            <!-- 2024.5.27 产品说又不要外层的表格导入功能了 -->
<!--            <el-upload-->
<!--                class="upload-daoru"-->
<!--                ref="upload"-->
<!--                action=""-->
<!--                :on-change="importExcel"-->
<!--                accept=".xlsx,.xls"-->
<!--                :show-file-list='false'-->
<!--                :auto-upload="false">-->
<!--                <el-button class='theme-button' slot="trigger" size="small">导入模板</el-button>-->
<!--            </el-upload>-->
<!--            <el-button class='theme-button' style='float: right;margin-right: 10px' @click='downloadTemplate'>下载导入模板</el-button>-->
        </el-row>

        <el-table :data="tableData" border style="margin-top:20px;" ref="multipleTable" :header-cell-style="{ background: 'rgba(2,179,134,0.1)',color:'rgba(0,0,0,0.85)'}">
            <!-- <el-table-column prop="inputsName" sortable label="品名རྫས་མིང་"></el-table-column>
            <el-table-column prop="source" sortable label="来源འབྱུང་ཁུངས།"></el-table-column>
            <el-table-column prop="type" sortable label="类别རིགས་"></el-table-column>
            <el-table-column prop="buyTime" sortable label="购买时间ཉོ་སྒྲུབ་དུས་ཚོད་"></el-table-column> -->
            <el-table-column prop="no" sortable label="་农药/化肥编号"></el-table-column>

            <el-table-column prop="inputsName" sortable label="品名་"></el-table-column>
            <el-table-column prop="source" sortable label="来源"></el-table-column>
            <el-table-column prop="type" sortable label="类别"></el-table-column>
            <el-table-column prop="buyTime" sortable label="购买时间"></el-table-column>
            <!-- <el-table-column sortable label="规格ཚད་གཞི་"   >
                <template slot-scope="scope">{{scope.row.spec}}{{scope.row.specUnits}}</template>
            </el-table-column> -->
<!--            <el-table-column sortable label="规格">-->
<!--                <template slot-scope="scope">{{ scope.row.spec }}{{ scope.row.specUnits }}</template>-->
<!--            </el-table-column>-->
            <!-- <el-table-column sortable label="剩余数量ལྷག་མའི་གྲངས་འབོར་" >
                <template slot-scope="scope">{{scope.row.surplusNumber}}{{scope.row.units}}</template>
            </el-table-column> -->
            <el-table-column sortable label="剩余数量">
                <template slot-scope="scope">{{ scope.row.surplusNumber }}{{ scope.row.units }}</template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEditStorage(scope.row)">库存调整</el-button>
                    <el-button type="text" v-if="!edit" @click="handleEdit(scope.$index, scope.row)"
                        v-show="$store.state.zangw == '1'">编辑རྩོམ་སྒྲིག</el-button>
                    <el-button type="text" v-if="!edit" @click="handleEdit(scope.$index, scope.row)"
                        v-show="$store.state.zangw == '2'">编辑</el-button>
                    <el-button type="text" v-if="!check" @click="handleCheck(scope.$index, scope.row)"
                        v-show="$store.state.zangw == '1'">查看ལྟ་ཞིབ་</el-button>
                    <el-button type="text" v-if="!check" @click="handleCheck(scope.$index, scope.row)"
                        v-show="$store.state.zangw == '2'">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"
                       :total="total" @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
        <el-dialog title="库存调整" :visible.sync="dialogVisible" width="30%">
            <el-form :model="storageForm" ref='storageForm' :rules='rules' label-position='left' label-width='120px'>
                <el-form-item label="调整时间:" prop="time">
                    <el-date-picker class='FW-300' v-model="storageForm.time" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label="调整类型:" prop="type">
                    <el-select class='FW-300' v-model="storageForm.type" placeholder="请选择">
                        <el-option label="领料退回" value="OUT"></el-option>
                        <el-option label="领料新增" value="IN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="调整数量:" prop="number">
                    <el-input class='FW-300' v-model="storageForm.number" placeholder="请输入调整数量">
                        <template slot="suffix">kg</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="负责人:" prop="responsiblePerson">
                    <el-input class='FW-300' v-model="storageForm.responsiblePerson" placeholder="请输入负责人"></el-input>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                    <el-input class='FW-300' v-model="storageForm.remark" type='textarea' :rows="5" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button class='theme-button' @click="handleStorage">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { inputs_findByList, template_importUser, updateInputStock } from '@/request/api';
export default {
    data() {
        return {
            added: true,
            total: 0,
            currentPage: 1,
            pagesize: 10,
            searchName: '',
            tableData: [],
            form: {},
            idx: -1,
            id: -1,
            boxCode: '',
            boxCode1: '',
            del: true,
            check: true,
            edit: true,
            action: '',
            dialogVisible:false,
            rules:{
                time:[{required: true, message: '请选择时间', trigger: 'change'}],
                type:[{required: true, message: '请选择类型', trigger: 'change'}],
                number:[{required: true, message: '请输入数量', trigger: 'change'}],
                responsiblePerson:[{required: true, message: '请输入负责人', trigger: 'change'}],
                // remark:[{required: true, message: '请输入备注', trigger: 'change'}],
            },
            storageForm:{
                time:this.$util.dateFormat('yyyy-MM-dd HH:mm:ss',new Date()),
                type:'',
                number:'',
                responsiblePerson:localStorage.getItem('loginname'),
                remark:'',
                units:'kg'
            },
            curData:{},
        };
    },
    mounted() {
        this.init();
        this.judgmentAuthority()
    },
    methods: {
        handleStorage(){
            this.$refs['storageForm'].validate(async valid => {
                if (valid) {
                    this.curData.id
                    let params = {
                        id:this.curData.id,
                        inputsLog: this.storageForm
                    }
                   const res = await updateInputStock(params)
                    console.log(res);
                    if (res.code == 200) {
                        this.$notify({
                            title: '操作成功',
                            message: '库存调整成功',
                            type: 'success'
                        });
                        this.storageForm = {
                            time:this.$util.dateFormat('yyyy-MM-dd HH:mm:ss',new Date()),
                            type:'',
                            number:'',
                            responsiblePerson:localStorage.getItem('loginname'),
                            remark:'',
                            units:'kg'
                        }
                        this.init()
                    } else{
                        this.$notify.error({
                            title: '操作失败',
                            message: '库存调整失败',
                            type: 'error'
                        });
                    }
                    this.dialogVisible = false
                }
            })
        },
        //库存调整
        handleEditStorage(row){
            this.curData = row
            this.dialogVisible = true
        },
        importExcel(file){
            let formData = new FormData();
            formData.append('file', file.raw);
            let config = {
                headers:{'Content-Type':'multipart/form-data'}
            };
            // 导入模板的接口(formData).then((res) =>{
            //     if (res.code == 200) {
            //         this.$notify({
            //             title: '操作成功',
            //             message: '导入成功',
            //             type: 'success'
            //         });
            //         this.init()
            //     } else{
            //         this.$notify.error({
            //             title: '操作失败',
            //             message: '导入失败',
            //             type: 'error'
            //         });
            //     }
            // })
        },
        downloadTemplate(){
            const companyId =  localStorage.getItem('companyId')
            let templateUrl ="/plant/template/模板下载地址&companyId="
            window.location.href = "http://47.108.220.160:90/jcApi/plant" + templateUrl + companyId
        },
        add() {
            this.$router.push({
                path: '/inputs/added'
            });
        },
        addlaow() {
            this.$router.push({
                path: '/inputs/addlaow'
            });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.init();
        },
        init() {
            var params = {
                inputsName: this.searchName,
                page: this.currentPage
            };
            inputs_findByList(params).then((res) => {
                // if (res.code == 200) {
                this.tableData = res.rows;
                this.total = res.total;
                // }
            });
        },
        handleCheck(index, row) {
            this.$router.push({
                path: '/inputs/check',
                query: {
                    id: row.id
                }
            });
        },
        //搜索
        handleSearch() {
            this.currentPage = 1;
            this.init();
        },
        //跳转编辑页面
        handleEdit(index, row) {
            this.$router.push({
                path: '/inputs/added',
                query: {
                    id: row.id
                }
            });
        },
        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem("panduanzhuangtai"))
            type.map(item1 => {
                if (item1.name == '投入品管理' && item1.children != null) {
                    for (var i = 0; i < item1.children.length; i++) {
                        if (item1.children[i].name == '新增') this.added = false;
                        if (item1.children[i].name == '编辑') this.edit = false;
                        if (item1.children[i].name == '查看') this.check = false;
                    }
                }
            })
        }
        //删除
        // handleDelete(index, row) {
        //     this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {});
        // }
    }
};
</script>

<style scoped lang="less">
.FW-300{
    width: 350px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
    background: #02B386;
}
/deep/.upload-daoru {
    background: #eee;

    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px;
    }
}

.el-table {
    margin-top: 20px;
}

.el-pagination {
    text-align: right;
}

.el-col {
    margin-bottom: 0;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.el-upload--text {
    width: 180px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

</style>
